<template>
    <div v-if="JSON.stringify(article) !== '{}'">
        <main id="main" class="site-main karma-blog-page" role="main">
            <div class="container">
                <div class="row">
                    <div class="karma-blog-content col-sm-9">
                        <article class="blog-grid margin-b-30 athena-blog-post reveal fadeInUp">
                            <div class="blog-grid-content">
                                <h2 class="blog-grid-title-lg">{{ article.title }}</h2>
                                <template v-if="article.session">
                                    <dl v-html="article.content"></dl>
                                    <template v-if="JSON.stringify(user) !== '{}'">
                                        <template v-if="user.points >= article.points">
                                            <dl v-html="article.hide_content"></dl>
                                        </template>
                                        <template v-else>
                                            <div class="content-hide-tips text-center">
                                                <i class="fa fa-lock"></i>
                                                <div class="mar20-b">对不起您的积分不足，请多参与博客活跃或者
                                                    <a target="_blank"
                                                       href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=WW1paGxva2hpaRkoKHc6NjQ">联系我!</a>
                                                </div>
                                            </div>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <div class="content-hide-tips text-center">
                                            <i class="fa fa-lock"></i>
                                            <div class="mar20-b">当前内容已被隐藏，您需要登录才能查看</div>
                                            <a href="#login">登录</a>
                                            <a href="#register">注册</a>
                                        </div>
                                    </template>
                                </template>
                                <template v-else>
                                    <dl v-html="article.content"></dl>
                                </template>


                            </div>
                            <div class="row text-center">
                                <p>如果对您有帮助,您又乐意的话,请多多支持!</p>
                                <div class="col-md-6">
                                    <img src="https://assets.yanghaha.vip/front/img/zhifubao.png">
                                </div>
                                <div class="col-md-6">
                                    <img src="https://assets.yanghaha.vip/front/img/weixin.png">
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="col-sm-3 hidden-sm hidden-xs secondary">
                        <div class="widget-area" role="complementary">
                            <div class="blog-sidebar-heading">
                                <h4 class="blog-sidebar-heading-title"><i
                                        class="blog-sidebar-heading-icon fa fa-fire"></i>分类:{{
                                    article.type }}
                                </h4>
                            </div>
                            <div class="blog-sidebar-content scrollbar">
                                <ul class="timeline-v2">
                                    <li class="timeline-v2-list-item">
                                        <small class="timeline-v2-news-date">发布日期:</small>
                                        <h5 class="timeline-v2-news-title">
                                            {{ article.created_at }}
                                        </h5>
                                    </li>
                                    <li class="timeline-v2-list-item">
                                        <small class="timeline-v2-news-date">更新时间:</small>
                                        <h5 class="timeline-v2-news-title">
                                            {{ article.updated_at }}
                                        </h5>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="clear"></div>
            <!--页码开始-->
            <div class="karma-pagination">
            </div>
            <!--页码结束-->
        </main>
    </div>
</template>
<script>
    import BaseService from "@/services/BaseService";

    const BaseServiceApi = new BaseService();
    export default {
        name: "Detail",
        data: function () {
            return {
                id: this.$route.params.id,
                article: {},
                user: {}
            };
        },
        mounted: function () {
            this.getItem();
        },
        methods: {
            getItem: function () {
                //TODO 获取URL参数
                let token = BaseServiceApi.getStorage("token");

                let data = {
                    id: this.id,
                };
                let header = {
                    Authorization: token === null ? "" : token
                };
                BaseServiceApi.getApi("/api/v1/detail", data, header).then(res => {
                    if (res.data.code === 200) {
                        this.article = res.data.data;
                        this.user = res.data.user;
                        document.title = this.article.title;
                        document.querySelector('meta[name="description"]').setAttribute('content', this.article.description);
                        document.querySelector('meta[name="keywords"]').setAttribute('content', this.article.keyword);
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .content-hide-tips {
        padding: 50px 20px 40px 20px;
        border: 1px dashed #ccc;
        margin: 20px 0 40px 0;
        background-color: #fafafa
    }
</style>